<template>
  <div>
    <a-row type="flex" >
      <a-col :md="18" :sm="24">
          <detail-list :col="2">
            <detail-list-item :term="$t('key.xh')">
              {{ studentData.xh }}&emsp;
            </detail-list-item>
            <detail-list-item :term="$t('key.name')">
              {{ studentData.xm }}&emsp;
            </detail-list-item>
            <detail-list-item :term="$t('key.sex')">
              {{ studentData.xbmc }}&emsp;
            </detail-list-item>
            <detail-list-item :term="$t('key.yx')">
              {{ studentData.xjxx.ssyxmc }}&emsp;
            </detail-list-item>
            <detail-list-item :term="$t('key.zy')">
              {{ studentData.xjxx.sszymc }}&emsp;
            </detail-list-item>
            <detail-list-item :term="$t('key.subjectCode')">
              {{ studentData.xjxx.sszym }}&emsp;
            </detail-list-item>
            <detail-list-item :term="$t('key.idCard')">
              {{ zjhm }}&emsp;
              <a-button v-if="isShow[0].one" type="primary" size="small" @click="seeNumber(studentData.zjhm,1)">
                查看
              </a-button>
              <a-button v-if="!isShow[0].one" type="primary" size="small" @click="hideNumberZjhm(studentData.zjhm)">
                隐藏
              </a-button>
            </detail-list-item>
            <detail-list-item :term="$t('key.personalCall')">
              {{ lxdh }}&emsp;
              <a-button v-if="isShow[1].two" type="primary" size="small" @click="seeNumber(studentData.lxdh,2)">
                查看
              </a-button>
              <a-button v-if="!isShow[1].two" type="primary" size="small" @click="hideNumberLxdh(studentData.lxdh)">
                隐藏
              </a-button>
            </detail-list-item>
            <detail-list-item :term="$t('key.birthDate')">
              {{ studentData.csrq && studentData.csrq.format('YYYY-MM-DD') }}&emsp;
            </detail-list-item>
            <detail-list-item :term="$t('key.email')">
              {{ studentData.dzxx }}&emsp;
            </detail-list-item>
            <detail-list-item term="国内联系人">
              {{ studentData.gnlxr }}&emsp;
            </detail-list-item>
            <detail-list-item term="联系人电话">
              {{ studentData.gnlxrdh }}&emsp;
            </detail-list-item>
            <detail-list-item term="留学国别">
              {{ studentData.xjxx.lxgbmc }}&emsp;
            </detail-list-item>
            <detail-list-item term="国外留学高校及院系">
              {{ studentData.xjxx.lxgxyx }}&emsp;
            </detail-list-item>
            <detail-list-item term="学习期限">
              {{ studentData.xjxx.lxxxqx }}&emsp;
            </detail-list-item>
            <detail-list-item term="拟毕业时间">
              {{ studentData.xjxx.nbysj }}&emsp;
            </detail-list-item>
            <detail-list-item term="校内住宿地址">
              {{ studentData.xjxx.xnzsdz }}&emsp;
            </detail-list-item>
            <detail-list-item term="海外住址">
              {{ studentData.xjxx.hwzz }}&emsp;
            </detail-list-item>
            
        </detail-list>
      </a-col>
      <a-col :md="6" :sm="24">
        <img style="width:200px" :src="studentData.zpdz ? `${IMG_URL}${studentData.zpdz}` : require('@/assets/avator.jpg')" alt="">
      </a-col>
    </a-row>
  </div>
</template>

<script>
  import DetailList from '~/tool/DetailList'
  const DetailListItem = DetailList.Item
  export default {
    components: {DetailList, DetailListItem},
    props: ['xh','checked'],
    data() {
      return {
        studentData: {
          xjxx: {}
        },
        zjhm: '',
        lxdh: '',
        isShow: [{one:true},{two:true}],
        IMG_URL: process.env.IMG_URL
      }
    },
    created() {
      this.$api.overseas.studentInfo(this.xh).then(res => {
          this.studentData = res.data
          // this.studentData.zjhm = '350825199510121'
          // this.studentData.lxdh = '12345678'
          this.hideNumberZjhm(this.studentData.zjhm)
          this.hideNumberLxdh(this.studentData.lxdh)
        })

    },
    methods:{

      seeNumber(num,n){
        if(n == 1){
          this.zjhm = num
          this.isShow[0].one = false
        }else{
          this.lxdh = num
          this.isShow[1].two = false
        }
      },
      hideNumberZjhm(num){
        let arr = []
          arr = num.split('').map((item,index) => {
            if( index > 5 ){
              return item.replace(item,'*')
            }
            return item
          })
          this.zjhm = arr.join('')
          this.isShow[0].one = true
      },
      hideNumberLxdh(num){
        let arr = []
          arr = num.split('').map((item,index) => {
            if(index > 2){
              return item.replace(item,'*')
            }
            return item
          })
          this.lxdh = arr.join('')
          this.isShow[1].two = true
      }
    }
  }
</script>

<style scoped lang="less">
  .ant-col-4 {
    margin-bottom: 10px;
  }

</style>
